<template>
 <div>


<div class="content" @scroll="fetchData"  >
       

        <div class="form sign-in">
            

            <select v-model="type">
              
              <option v-for="item in types" :value="item.id">
                
                {{ item.text }}

              </option>


            </select>

            <div v-show="atuser_show">
                
                <ul>
                  
                  <li @click="select(item.username,item.id)" v-for="item in userlist" >
                    
                    {{ item.username }}

                  </li>

                </ul>


            </div>

            <van-field

              v-model = "info"

              rows = "5"

              label = "发帖"

              type="textarea"

              placeholder="请输入帖子内容"


            />

            <van-uploader v-model="imglist" v-show="showimg" :after-read="afterImg" multiple > 

              <van-button color="green">上传图片</van-button>

            </van-uploader>


            <van-uploader v-show="showvideo" :after-read="afterVideo"> 

              <van-button color="blue">上传视频</van-button>

            </van-uploader>



       <div v-show="video">

          <video width="200" height="200" :src="video" controls="controls"  muted autoplay="autoplay" >
            
          </video>

       </div>


       <van-button color="orange" @click="send">发布</van-button>


       <!--帖子列表-->

       <table>
          
          <tr v-for="(item,index) in sublist">
            
            <td>

                <div v-html="item.info"></div>


                <van-row type="flex" justify="space-between" >


                    <van-col span="8" v-for="val,index1 in item.imglist" :key="index1">
                      

                      <van-image round width="6rem" height="6rem" :src="'http://localhost:8888/static/'+val"   />


                    </van-col>



                </van-row>


                <div v-show="item.video">

                 <video width="200" height="200" :src="item.video" controls="controls"  muted autoplay="autoplay" >
            
          </video>

                </div>


                <van-button @click="delsub(item.id,index)" v-if="item.uid == uid" color="red">删除帖子</van-button>


                <van-button @click="openedit(item.id,index)" v-if="item.uid == uid" color="wheat">修改帖子</van-button>

                 <van-button @click="opencomment(item.id)" color="orange">点击评论({{ item.comment }})</van-button>


            </td>

          </tr>

       </table>



       <van-popup v-model="comment_show" >
         

          <van-field

              v-model = "comment"

              rows = "5"

              label = "发表评论"

              type="textarea"

              placeholder="请输入评论内容"


            />


            <van-button @click="docomment" color="orange">发布评论</van-button>


            <table>
                
                <tr v-for="item,index in commentlist">
                  
                  <td v-html="item.username">:</td>  <td> {{ item.content }}  </td>

                  <td> <van-button color="blue" size="small">回复</van-button> </td>

                </tr>


            </table>



       </van-popup>


        
        <van-popup v-model="show">
          

            <select v-model="edit_type">
              
              <option v-for="item in types" :value="item.id">
                
                {{ item.text }}

              </option>


            </select>


             <div v-show="atuser_show">
                
                <ul>
                  
                  <li @click="select_edit(item.username,item.id)" v-for="item in userlist" >
                    
                    {{ item.username }}

                  </li>

                </ul>


            </div>


            <van-field

              v-model = "edit_info"

              rows = "5"

              label = "发帖"

              type="textarea"

              placeholder="请输入帖子内容"


            />


             <van-row type="flex" justify="space-between" >


                    <van-col span="8" v-for="val,index in edit_imglist" :key="index">
                      

                      <van-image round width="6rem" height="6rem" :src="'http://localhost:8888/static/'+val"   />

                      <van-button color="purple" size="small" @click="delimg(index,val)" >删除</van-button>


                    </van-col>



                </van-row>

                <van-uploader :after-read="afterimg_edit" />


                <van-button color="green" @click="save">点击保存</van-button>


        </van-popup>





        </div>
        <div class="sub-cont">
            <div class="img">
                <div class="img__text m--up">
                  

                  <myright />


                  
                </div>
              
            </div>
         
        </div>
    </div>

    
  </div>
</template>


 
<script>

import md5 from 'js-md5';
import myright from './myright.vue'

export default {
  data () {
    return {
      info:"",
      uid:0,
      type:0,
      //帖子类型
      types:[{id:0,text:"公开"},{id:1,text:"粉丝可见"},{id:2,text:"好友可见"},{id:3,text:"仅自己可见"}],
      img:"",
      imglist:[],
      video:"",
      showvideo:1,
      showimg:1,
      atuser_show:0,
      userlist:[],
      //帖子列表
      sublist:[],
      //重命名后的图集
      newlist:[],
      show:false,
      //修改状态下的帖子类型
      edit_type:0,
      edit_info:"",
      edit_imglist:[],
      sid:0,
      //页数
      page:1,
      //总页数
      allpage:0,
      //评论内容
      comment:"",
      comment_show:false,
      //评论列表
      commentlist:[],
      //用户字典
      user_dict:{}
      
    }
  },
  //注册组件标签
  components:{

    'myright':myright

  },
  mounted:function(){

    this.uid = localStorage.getItem("id");

   //this.$toast('内容');

   //获取可at用户
   this.get_atuser();

   //获取帖子列表
   this.get_data();

  
},
watch:{

  //监听属性
  info:function(){

    //判断是否输入了at符号
    var last = this.info.substr(this.info.length-1,1);

    if(last === "@"){

      //输出智能提示
      this.atuser_show = 1;

    }else{

      this.atuser_show = 0;

    }

  },
  edit_info:function(){

    //判断是否输入了at符号
    var last = this.edit_info.substr(this.info.length-1,1);

    if(last === "@"){

      //输出智能提示
      this.atuser_show = 1;

    }else{

      this.atuser_show = 0;

    }

  }

},
  methods:{

    //获取评论列表
    get_comment:function(){


      //发起请求
      this.myaxios("http://localhost:8888/comment/","get",{"sid":this.sid}).then(data =>{

          console.log(data);

           // this.commentlist = data;

           this.commentlist = [];

           //遍历赋值
           for (var i = data.length - 1; i >= 0; i--) {
        

                this.commentlist.unshift({"content":data[i]["content"],"username":"<a href='/userinfo/?uid="+data[i]["uid"]+"'>"+this.user_dict[data[i]["uid"]]+"</a>"});

           }


        });


    },
    //发布评论
    docomment:function(){


      //发起请求
      this.myaxios("http://localhost:8888/comment/","post",{"sid":this.sid,"uid":localStorage.getItem("id"),"content":this.comment}).then(data =>{

          console.log(data);

          if(data.code == 200){

              this.$toast.success("发表评论成功");

          }

        });



    },
    //评论开启
    opencomment:function(sid){


          this.comment_show = true;
          this.sid = sid;

          this.get_comment();


    },
    //触发滚动
    fetchData(event){


          //判断屏幕底部坐标
          let scrollBottom = event.target.scrollHeight - event.target.scrollTop - event.target.clientHeight;

          if( scrollBottom < 150 ){

            

            this.page = this.page + 1;

            if(this.page <= this.allpage){



              console.log("获取数据");

            //this.get_data();

            // 毫秒 
            this.$toast.success("正在加载数据......");
            setTimeout(this.get_data(),3000);




            }


          }
          

    },
    //保存帖子内容
    save:function(){

      //发起请求
      this.myaxios("http://localhost:8888/sub/","put",{"sid":this.sid,"type":this.edit_type,"info":this.edit_info }).then(data =>{

          console.log(data);

          if(data.code == 200){

              this.$toast.success("修改成功");


              this.sublist = [];

              //刷新列表页
              this.get_data();

          }

        });


    },
    //修改图片删除逻辑
    delimg:function(index,filename){


       //动态删除
      this.edit_imglist.splice(index,1);

      //发起请求
      this.myaxios("http://localhost:8888/img/","delete",{"sid":this.sid,"filename":filename,"imglist":JSON.stringify(this.edit_imglist) }).then(data =>{

          console.log(data);

        });


    },
    //获取单个帖子数据
    get_onesub(sid){


      //发起请求
      this.myaxios("http://localhost:8888/onesub/","get",{"sid":sid}).then(data =>{

          console.log(data);

          //赋值
          this.edit_type = data.type;
          this.edit_info = data.info;
          this.edit_imglist = data.imglist;

        });


    },
    //开启编辑窗口
    openedit:function(sid,index){

          //开启编辑窗口
          this.show = true;

          //调用接口
          this.get_onesub(sid);

          this.sid = sid;


    },
    //删除帖子
    delsub:function(sid,index){


        var res = confirm("您是否要删除该帖子?");

        if(res === true){


            //发起请求
      this.myaxios("http://localhost:8888/sub/","delete",{"id":sid}).then(data =>{

          console.log(data);

          this.sublist.splice(index,1);

        });



        }


    },
    //点选用户
    select:function(username,id){


      console.log(username);

      //填充用户名
      this.info = this.info + username;

    },
    //点选用户
    select_edit:function(username,id){


      console.log(username);

      //填充用户名
      this.edit_info = this.edit_info + username;

    },
    //获取帖子数据
    get_data:function(){


      //发起请求
      this.myaxios("http://localhost:8888/sub/","get",{"uid":localStorage.getItem("id"),"page":this.page}).then(data =>{

          console.log(data);
          //this.sublist = data;

          this.allpage = data.allpage;

          //动态添加
          for (var i = data.data.length - 1; i >= 0; i--) {
           
                this.sublist.unshift(data.data[i]);

          }


          console.log(this.sublist)

        });



    },
    //获取可at用户列表
    get_atuser:function(){


      //发起请求
      this.myaxios("http://localhost:8888/atuser/","get",{"id":localStorage.getItem("id")}).then(data =>{

          console.log(data);

          //this.userlist = data;

          //遍历以后判断
          for (var i = data.length - 1; i >= 0; i--) {

                  this.user_dict[data[i]["id"]] = data[i]["username"];
            
                  if(data[i]["id"] != localStorage.getItem("id")){

                    this.userlist.push(data[i]);

                  }

          }

        });



    },
    //发布帖子
    send:function(){


      var data = {};

      data["type"] = this.type;
      data["info"] = this.info;
      data["uid"] = localStorage.getItem("id");

      if(this.img != ""){

        data["img"] = this.img;

      }

      if(this.video != ""){

        data["video"] = this.video;

      }

      //发起请求
      this.myaxios("http://localhost:8888/sub/","post",data).then(data =>{

          console.log(data);

          if(data.code === 200){

            this.$toast.success("发布成功");

            //插入图集

            if(this.imglist.length > 0){


              // var mylist = [];
              // //遍历图集变量
              // for (var i = this.imglist.length - 1; i >= 0; i--) {
              //   mylist.push(this.imglist[i].file.name);
              // }


              // console.log(mylist);


              //请求图集插入接口
              this.myaxios("http://localhost:8888/img/","post",{"sid":data.sid,"imglist":JSON.stringify(this.newlist)}).then(result =>{

                console.log(result);

                //动态添加帖子内容 向头部添加
                this.sublist.unshift({"info":this.info,"id":data.sid,"imglist":this.newlist,"uid":localStorage.getItem("id")});


        });


            }else{

                //动态添加帖子内容 向头部添加
                this.sublist.unshift({"info":this.info,"id":data.sid,"imglist":[],"uid":localStorage.getItem("id")});

            }




          }else{
            this.$toast.fail(data.msg);
          }

        });



    },
    //上传视频
    afterVideo(file){


      let data = new FormData();

      data.append("file",file.file);

      const axiosInstance = this.axios.create({withCredentials:false});

      //发起请求
      axiosInstance({

        method:"post",
        url:"http://localhost:8888/upload/",
        data:data
      }).then(data => {

        console.log(data);

        this.video = this.upload_dir + data.data.filename;

        //将视频按钮隐藏
        this.showimg = 0;

      });


    },

    //修改上传图集

   afterimg_edit(file){

      let data = new FormData();

      data.append("file",file.file);

      const axiosInstance = this.axios.create({withCredentials:false});

      //发起请求
      axiosInstance({

        method:"post",
        url:"http://localhost:8888/upload/",
        data:data
      }).then(data => {

        console.log(data);

        this.img = this.upload_dir + data.data.filename;

        this.edit_imglist.push(data.data.filename);


        //请求后端图集修改接口

        //发起请求
      this.myaxios("http://localhost:8888/img/","put",{"sid":this.sid,"imglist":JSON.stringify(this.edit_imglist)}).then(res =>{

          console.log(data);

        });



      });


    },

    //上传图片
    afterImg(file){


      let data = new FormData();

      data.append("file",file.file);

      const axiosInstance = this.axios.create({withCredentials:false});

      //发起请求
      axiosInstance({

        method:"post",
        url:"http://localhost:8888/upload/",
        data:data
      }).then(data => {

        console.log(data);

        this.img = this.upload_dir + data.data.filename;

        this.newlist.push(data.data.filename);

        //将视频按钮隐藏
        this.showvideo = 0;

        console.log(this.imglist);

      });


    }

     
  }
}


</script>
 
<style scoped>


li {cursor:pointer;}

tr {line-height:30px;}

.content {

    overflow:scroll;
    max-height:850px;
    min-height:850px;

}


</style>